<template>
  <div>
    <div class="flex-line  center">
      <div class="mr-20">
        <el-input v-model="searchVal" placeholder="请输入内容" clearable />
      </div>
      <el-button class="gradientVertical" size="large" round @click="searchFun">搜索</el-button>
    </div>
    <div style="margin-top: 10px">
      <form-info v-if="cardInfo" :items="infoItems" />
    </div>
  </div>
</template>

<script>
import { cardStatus } from '../api'
import FormInfo from '@/components/Basic/Form/FormInfo'
import { infoItems } from './config'
export default {
  components: {
    FormInfo
  },
  data () {
    return {
      loading: false,
      searchVal: '',
      cardInfo: null
    }
  },
  computed: {
    fields () {
      return [
        {
          key: 'name',
          label: '摄像头名称',
          rules: [{ required: false, message: '请输入' }]
        }
      ]
    },

    infoItems () {
      return infoItems(this.cardInfo)
    }
  },
  methods: {
    searchFun () {
      this.cardInfo = null
      cardStatus({ cardNo: this.searchVal }).then(res => {
        if (res) {
          this.cardInfo = res
        } else {
          this.$message.warning('没有找到此卡信息')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
